<script>
	import { fetchList } from '../vuex/actions';
  import toTop from './toTop';
  import loading from './loading';

	export default {
		data() {
			return {
				topicList: [],
				loading: true,
				page: 1,
				tabType: ''
			}
		},
		vuex: {
			actions: {
				fetchList
			}
		},
		methods: {
			loadMore() {
				let clientHeight = document.body.clientHeight;
				let scrollHeight = document.body.scrollTop;
				let screenHeight = window.screen.height;


				if (clientHeight < screenHeight + scrollHeight ) {

					if (this.loading) return;
					this.loading = true;
					this.fetchList(this.tabType, ++this.page)
						.then(res => {
							this.topicList = this.topicList.concat(res);
							this.loading = false;
						}, res => {
							alert('加载失败，请稍后重试');
							this.loading = false;
						});
				}
			}
		},

		beforeDestroy() {
			window.removeEventListener('scroll', this.loadMore);
		},
		components: {
			toTop, loading
		},
		route: {
			data (transition) {
				this.topicList = [];
				window.removeEventListener('scroll', this.loadMore);
				this.page = 1;
				this.tabType = this.$route.params.tabType;
				this.fetchList(this.tabType)
					.then(res => {
						transition.next({topicList: res});
						this.loading = false;
						this.$nextTick(() => {
							window.addEventListener('scroll', this.loadMore, false);
						})
					}, res => {
						return {topicList: []}
					});
			}
		}
	}
</script>

<template>
	<div>
		<div class="panel">
			<div class="topic_list">
				<div class="topic_item" v-for="item in topicList">
	        <a v-link="{ path: '/user/' + item.author.loginname }" class="user_avatar">
	          <img :src="item.author.avatar_url"/> 
	        </a> 
	        <a v-link="{ path: '/topic/' + item.id }" class="topic_title">
	        	<h4>{{ item.title }}</h4> 
	        </a> 
	        <div class="reply_view">
	          <span class="reply_number">{{ item.reply_count }}</span> 
	          <span class="seperate">/</span>
	          <span class="view_number">{{ item.visit_count}}</span> 
	        </div> 
	      </div>
			</div>
			<loading loading="loading"></loading>
		</div>
		<to-top></to-top>
	</div>
</template>

<style lang="less" scoped>
	.topic_list {
		.topic_item {
			display: flex;
			align-items: center;
			height: 50px;
			padding: 0 10px;
			border-bottom: 1px #e0e0e0 solid;
			box-sizing: border-box;
			.user_avatar {
				display: block;
				width: 30px;
				margin-right: 5px;
				border-radius: 50%;
				overflow: hidden;
				img {
					display: block;
					width: 100%;
				}
			}
			.topic_title {
				display: block;
				flex: 1;
				height: 50px;
				line-height: 50px;
				margin-right: 5px;
				color: #333;
				font-weight: normal;
				font-size: 14px;
				overflow: hidden;
				h4 {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			.reply_view {
				font-size: 12px;
				.reply_number {
					color: #999;
				}
				.view_number {
					color: #666;
				}
			}
		}
	}
</style>